<template>
  <view class="my-coupon">
    <view class="content">
      <u-empty mode="coupon" v-if="result.data.length <= 0 && result.isEnd"></u-empty>
      <view style="overflow: hidden;" v-else>
        <view v-for="(i, k) in result.data" :key="k">
          <coupon-item @click="jumpPage" :item="i" :type="result.couponClass" />
        </view>
        
        <view class="loading-status"><u-loadmore :status="result.status" /></view>
      </view>
    </view>
  </view>
</template>

<script>
const dayjs = require('@/utils/dayjs.js')
import couponItem from './components/couponItem.vue' // 优惠券列表组件
export default {
  components: {
    couponItem
  },
  data() {
    return {
      result: {
        couponClass: 4,
        PageIndex: 1,
        PageSize: 20,
        isEnd: false,
        loading: false,
        status: 'loading',
        data: []
      },
      amount: 0
    }
  },
  onLoad(option) {
    this.amount = option.amount ? Number(option.amount) : ''
    this.getList()
  },
  methods: {
    // 跳转页面
    jumpPage(data) {
      // 检测优惠券
      this.checkCoupon(data)
    },
    // 计算总共有多少页
    pageCount (totalnum,limit){
      return totalnum > 0 ? ((totalnum < limit) ? 1 : ((totalnum % limit) ? (parseInt(totalnum / limit) + 1) : (totalnum / limit))) : 0
    },
    // 获取列表数据
    async getList(type) {
      let list = this.result
      if (type) {
        list.PageIndex = 1
        list.isEnd = false
        list.loading = false
        list.status = 'loading'
      }
      if (list.loading || list.isEnd) {
        return false
      }
      list.loading = true
      this.result = list
      try{
        let res = await this.$api.user.GetMyUsableSelfServiceCarWashCouponDetails({
          pageIndex: list.PageIndex,
          pageSize: list.PageSize
        })
        
        let couponlist = res.data.list.map(item => {
          item.coupon_name = item.coupon_Name
          item.cost_price = item.cost_Price
          item.deadline = dayjs(item.deadline).format('YYYY-MM-DD HH:mm:ss')
          return item
        })
        if (type) {
          list.data = []
        }
        
        if(couponlist.length <= 0 || list.PageIndex >= this.pageCount(res.data.total, list.PageSize)) {
          list.isEnd = true
          list.status = 'nomore'
        }
        
        if (couponlist.length > 0) {
          list.data = list.data.concat(couponlist)
          list.PageIndex = list.PageIndex + 1
        }
        list.loading = false
        this.result = list
      }catch(e){
        list.loading = false
        this.result = list
      }
    },
    async checkCoupon(data) {
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      try {
        const res = await this.$api.user.GetActuallyAmountBySelfServiceCarWashCouponDetails({
          amount: this.amount,
          couponId: data.id
        })
        uni.hideLoading()
        if (res.code === 200) {
          res.data.couponAllMoney = -Number(res.data.couponAllMoney)
          uni.$emit('changeWashCoupon', {
            ...data,
            ...res.data
          })
          uni.navigateBack({
            delta: 1
          })
        } else {
          uni.showToast({
            icon: 'none',
            title: res.msg
          })
        }
      } catch (e) {
        uni.hideLoading()
      }
    },
  }
}
</script>

<style>
page{
  background-color: #f6f6f6;
}
</style>

<style lang="scss">
page{
  height: 100%;
}
.my-coupon{
  height: 100%;
  display: flex;
  flex-direction: column;
  .content{
    flex: 1;
    overflow: hidden;
  }
  .swiper, .swiper-item, .scroll-view{
    height: 100%;
  }
  .loading-status{
    padding: 40rpx 0;
  }
  .coupon-item:last-child{
    margin-bottom: 0 !important;
  }
}


</style>
